<template>
  <div>
    <a-modal v-model:open="open" title="更新资源" @ok="handleOk">
      <EditForm :hidePassword="false" ref="rForm"></EditForm>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineEmits, nextTick } from 'vue'
import EditForm from './edit-form.vue'
import {
  type CreateMenuDto,
  getIdDetailApi, type MenuDto,
  updateMenuApi,
  type UpdateMenuDto
} from '@/api/menu.api.ts'

const emits = defineEmits(['editOk'])

const open = ref<boolean>(false)
const Record = ref()

const showModal = (record: MenuDto) => {
  Record.value = { ...record }
  getIdDetailApi(record.id).then((res: CreateMenuDto)=>{
    open.value = true;
    nextTick(() => {
      rForm.value?.setFormState(res)
    })
  })
}

const rForm = ref()
const handleOk = () => {
  rForm.value.submit().then((res: UpdateMenuDto) => {
    updateMenuApi(Record.value.id, res).then(() => {
      open.value = false;
      emits('editOk')
    })
  })
}

defineOptions({
  name: 'EditMenuModal',
})
defineExpose({
  showModal,
})
</script>
